<template>
	<view>
		<uni-popup ref="takePopup" type="bottom" @change="changePop" :safeArea="false">
			<view class="take-pop-content">
				<view class="title-row">
					<image :src="selected_item.imgSrc" style="height: 130rpx;" mode="heightFix">
					</image>
					<text>{{selected_item.name}}</text>
				</view>

				<view class="msg-row">
					<view class="left">
						<uni-icons type="calendar" size="25"></uni-icons>
						<text>保质期</text>
					</view>
					{{selected_item.shortestWarrantyTime}}天
				</view>
				<view class="msg-row">
					<view class="left">
						<uni-icons type="star" size="25"></uni-icons>
						<text>库存</text>
					</view>
					{{selected_item.num+''+selected_item.unit}}
				</view>
				<view class="msg-row">
					<view class="left">
						<uni-icons type="location" size="25"></uni-icons>
						<text>位置</text>
					</view>
					{{selected_item.location||''}}
				</view>
				<view :class="['msg-row',{'fresh':selected_item.shortestWarrantyTime>=7},
						{'warn':selected_item.shortestWarrantyTime<7&&selected_item.shortestWarrantyTime>0},
						{'danger':selected_item.shortestWarrantyTime<=0}]">
					<view class="left">
						<uni-icons type="fire" size="25"></uni-icons>
						<text>新鲜程度</text>
					</view>
				</view>
				<view class="msg-row">
					<view class="left">
						<uni-icons type="tune" size="25"></uni-icons>
						<text>数量</text>
					</view>
					<my-number-box :background="'#fff'" :value="num" :min="1" :max="selected_item.num"
						@change="changeValue" />
				</view>
				<button type="default" @click="takeItem">取出</button>
			</view>
		</uni-popup>

		<view class="obj-list-view">
			<view class="obj-item" :class="[
				{'item-box-fresh':item.shortestWarrantyTime>=7},
				{'item-box-warn':item.shortestWarrantyTime<7&&item.shortestWarrantyTime>0},
				{'item-box-danger':item.shortestWarrantyTime<=0}]" hover-class="hover-obj-item" v-for="(item, index) in obj_list"
				:key="item.id" @click="selectItem(item)">
				<view class="left">
					<text class="num-text">x{{item.num}}</text>
					<view class="bottom">
						<text class="name-text">{{item.name}}</text>
						<view class="other-text">
							<text class="date-text">保质期:{{item.shortestWarrantyTime}}天</text>
							<text class="unit-text">:{{item.unit||'份'}}</text>
						</view>
					</view>
				</view>
				<view class="right">
					<image :src="item.imgSrc" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "my-obj-list",
		props: {
			fid: {},
			obj_list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				// 选择的物资
				selected_item: {},
				// 取出数量
				num: 1,

			};
		},

		methods: {

			// 跳转

			//请求
			takeItem() {
				this.selected_item.num = this.num
				uni.$api.object.takeItem(this.selected_item)
				this.$refs.takePopup.close()
			},

			// 事件处理
			// 滑动穿透的处理，子传父
			changePop(e) {
				this.$emit('changePop', e.show)
			},
			selectItem(obj) {
				this.$refs.takePopup.open()
				this.selected_item = obj
				this.num = 1;
			},
			// 取出物资的数量
			changeValue(value) {
				this.num = value
			},
		}
	}
</script>

<style lang="scss">
	.obj-list-view {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 35rpx;
		padding-right: 35rpx;
		position: relative;
		padding-top: 20rpx;

		.obj-item {
			position: relative;
			margin-bottom: 20rpx;
			background-color: #fff;
			width: 48%;
			height: 230rpx;
			border-radius: 20rpx;

			.left {
				height: 100%;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				padding-left: 15rpx;

				.num-text {
					font-size: 55rpx;
					font-weight: 600;
					z-index: 1;
				}

				.bottom {
					display: flex;
					flex-direction: column;

					.name-text {
						font-size: 35rpx;
						font-weight: 500;
						z-index: 1;
					}

					.other-text {
						font-size: 25rpx;
						font-weight: 300;
						z-index: 1;
						display: flex;
						justify-content: space-between;

						.date-text {}

						.unit-text {
							padding-right: 15rpx;
						}
					}


				}
			}

			.right {
				overflow: hidden;
				position: absolute;
				top: 0;
				right: 0;
				width: 50%;
				height: 70%;
				padding: 5px;

				>image {
					height: 100%;
					width: 100%;
					border-radius: 20rpx;
				}
			}
		}

		.item-box-fresh {
			background-color: #96c0fd;
		}

		.item-box-warn {
			background-color: #FFCF8B;
		}

		.item-box-danger {
			background-color: #faaca2;
		}

		.hover-obj-item {
			background-color: #acacac;
		}
	}

	.take-pop-content {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		align-items: center;
		padding: 10px;
		padding-bottom: 20px;

		.title-row {
			display: flex;
			align-items: center;
			font-size: 22px;

			>text {
				margin-left: 10rpx;
			}
		}

		.msg-row {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e5e6eb;
			width: 80%;
			font-size: 20px;
			align-items: center;
			padding: 20rpx 0;

			.left {
				display: flex;
				align-items: center;

				>text {
					margin-left: 10rpx;
				}
			}

			&.fresh {
				&::after {
					content: ' ';
					display: block;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #96c0fd;
				}
			}

			&.warn {
				&::after {
					content: ' ';
					display: block;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #FFCF8B;
				}
			}

			&.danger {
				&::after {
					content: ' ';
					display: block;
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					background-color: #faaca2;
				}
			}
		}

		>button {
			padding: 0 60rpx;
			margin-top: 20rpx;
			background-color: #94bfff;
			color: #fff;
			font-size: 20px;
			line-height: 2;
		}
	}
</style>